<template>
  <div class="app-container">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div style="display: flex">
        <div>
          <!-- 原始记录 -->
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            style="width: 300px; margin: 0 12px 10px 0"
            @change="handleTime"
          />
        </div>

        <el-select
          v-model="cardvalue"
          placeholder="全公司"
          style="width: 120px"
        >
          <el-option
            v-for="item in cardoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <!-- 考勤组 -->
        <el-select
          v-if="cardvalue == '考勤组'"
          multiple
          filterable
          v-model="queryParams.groupIds"
          placeholder="请选择考勤组"
          style="width: 240px; margin-left: 10px"
          @change="handleGroupSelect"
        >
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <!-- 部门/人员 -->
        <select-show
          v-if="cardvalue == '部门/人员'"
          v-model:orgList="deptOrUserList"
          type="org"
          :disable-select-children-dept="false"
          :multiple="true"
          :showStyle="3"
        ></select-show>

        <!-- 已离职人员 -->
        <el-select
          v-if="cardvalue == '已离职人员'"
          multiple
          filterable
          v-model="queryParams.leavelds"
          placeholder="请选择已离职人员"
          style="width: 240px; margin-left: 10px"
          @change="handleLeaveSelect"
        >
          <el-option
            v-for="item in getLeaveList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-checkbox
          v-model="containCheck"
          style="margin-left: 20px"
          @change="handleContain"
          >包含90天内离职人员</el-checkbox
        >
      </div>
      <el-row>
        <el-col>
          <el-button
            type="primary"
            plain
            icon="Download"
            v-hasPermi="['attendance:original:export']"
            @click="handleExport"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" :data="postList">
      <el-table-column label="姓名" align="center" prop="userName" />
      <el-table-column label="考勤组" align="center" prop="groupName" />
      <el-table-column label="部门" align="center" prop="dept" />
      <el-table-column label="工号" align="center" prop="jobId" />
      <el-table-column label="职位" align="center" prop="postName" />
      <el-table-column label="考勤日期" align="center" prop="attendDay" />
      <el-table-column label="考勤时间" align="center" prop="attendTime" />
      <el-table-column label="打卡时间" align="center" prop="clockInTime" />
      <el-table-column label="打卡结果" align="center" prop="clockInResult" />
      <el-table-column label="打卡地址" align="center" prop="clockInAddress" />
      <el-table-column label="打卡备注" align="center" prop="clockInRemark" />
      <el-table-column
        label="异常打卡原因"
        align="center"
        prop="exceptionReason"
      />
      <el-table-column
        label="打卡图片1"
        align="center"
        prop="clockInPictureOne"
      />
      <el-table-column
        label="打卡图片2"
        align="center"
        prop="clockInPictureTwo"
      />
      <el-table-column label="打卡设备" align="center" prop="clockInDevice" />
      <el-table-column
        label="管理员修改备注"
        align="center"
        prop="updateRemark"
      />
      <el-table-column
        label="管理员修改备注图片1"
        align="center"
        prop="updateRemarkPictureone"
      />
      <el-table-column
        label="管理员修改备注图片2"
        align="center"
        prop="updateRemarkPictureTwo"
      />
      <el-table-column
        label="管理员修改备注图片3"
        align="center"
        prop="updateRemarkPictureThree"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Original">
import {
  getOriginalListApi,
  getLeaveListApi,
} from "@/api/attendance/statistics";
import selectShow from "@/views/flyflow/components/orgselect/selectAndShow.vue";
import { getGroupListApi } from "@/api/attendance/attendance";
import { watch, ref } from "vue";
import moment from "moment";

const { proxy } = getCurrentInstance();
const postList = ref([]);
const loading = ref(true);
const total = ref(0);
const timeValue = ref([
  moment().startOf("month").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);
const cardvalue = ref("");
const cardoptions = [
  {
    value: "全公司",
    label: "全公司",
  },
  {
    value: "考勤组",
    label: "考勤组",
  },
  {
    value: "部门/人员",
    label: "部门/人员",
  },
  {
    value: "已离职人员",
    label: "已离职人员",
  },
];
const containCheck = ref(true);
const groupList = ref([]);
const deptOrUserList = ref([]);
const leaveList = ref([]);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    startDay: moment().startOf("month").format("YYYY-MM-DD"), //开始日期
    endDay: moment().format("YYYY-MM-DD"), //结束日期
    groupIds: [], //考勤组id集合
    deptIds: [], //部门集合
    userIds: [], //员工集合
    leavelds: [], //离职人员集合
    contain: 2, //是否包含90天离职人员 1:不包含 2:包含
  },
});

const { queryParams } = toRefs(data);

/**
 * 监听部门人员查询
 */
watch(
  () => deptOrUserList.value,
  (val) => {
    queryParams.value.groupIds = [];
    queryParams.value.leavelds = [];
    val.map((item) => {
      if (item.type == "user") {
        queryParams.value.userIds.push(item.id);
      } else if (item.type == "dept") {
        queryParams.value.deptIds.push(item.id);
      }
    });

    getList();
  },
  { deep: true }
);

/**
 * 监听全公司查询
 */
watch(
  () => cardvalue.value,
  (val) => {
    if (val == "全公司") {
      queryParams.value.userIds = [];
      queryParams.value.deptIds = [];
      queryParams.value.groupIds = [];
      queryParams.value.leavelds = [];
    }
    getList();
  },
  { deep: true }
);

/** 查询原始记录列表 */
function getList() {
  loading.value = true;
  getOriginalListApi(queryParams.value).then((response) => {
    postList.value = response.rows;
    total.value = Number(response.total);
    loading.value = false;
  });
}

/**
 * 处理是否90天内离职人员查询
 */
const handleContain = () => {
  containCheck.value == true
    ? (queryParams.value.contain = 2)
    : (queryParams.value.contain = 1);
  getList();
};

/**
 * 处理时间查询
 */
const handleTime = (val) => {
  queryParams.value.startDay = val[0];
  queryParams.value.endDay = val[1];
  getList();
};

/**
 * 获取所有考勤组
 */
const getGroupList = () => {
  getGroupListApi().then((res) => {
    groupList.value = res.data;
  });
};
getGroupList();

/**
 * 获取所有离职人员
 */
const getLeaveList = () => {
  getLeaveListApi().then((res) => {
    leaveList.value = res.rows;
  });
};
getLeaveList();

/**
 * 处理按照考勤组查询
 */
const handleGroupSelect = () => {
  queryParams.value.userIds = [];
  queryParams.value.deptIds = [];
  queryParams.value.leavelds = [];
  getList();
};

/**
 * 处理按照离职人员查询
 */
const handleLeaveSelect = () => {
  queryParams.value.userIds = [];
  queryParams.value.deptIds = [];
  queryParams.value.groupIds = [];
  getList();
};

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "attendance/statistics/original/export",
    {
      ...queryParams.value,
    },
    `原始记录_${timeValue.value[0]}到${timeValue.value[1]}.xlsx`
  );
}

getList();
</script>
<style scoped></style>
